<template>
  <view class="search-blog-container">
    <view class="search-bar">
      <my-search
        :isShowSearchBar="true"
        :placeholderText="defaultPlaceholderText"
        v-model="searchVal"
        :config="{
          backgroundColor:'#f1f0f3'
        }"
        @confirm="onReserchConfirm"
        @cancel="onReserchCancel"
        @clear="onReserchClear"
        @focus="onReserchFocus"
        @blur="onReserchBlur"
      ></my-search>
    </view>
    <!-- 搜索热搜 -->
    <view class="search-hot-list card" v-if="showType === HOT_LIST"
      ><search-hot-list @onHotListClick="onReserchConfirm"></search-hot-list
    ></view>
    <!-- 搜索历史 -->
    <view class="search-history"  v-else-if="showType === SEARCH_HISTORY"
      ><search-history  @onResearch="onReserchConfirm"></search-history
    ></view>
    <!-- 搜索结果 -->
    <view class="search-result-list" v-else
      ><search-result-list ref="mescrollItem" :searchStr="searchVal"></search-result-list
    ></view>
    
  </view>
</template>

<script>
import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js'
import {mapMutations} from 'vuex'
import mySearch from "../../../components/mySearch/mySearch.vue";
import { getDefaultTextAPI } from "../../../apis/search";
import SearchResultList from "../../../components/search-result-list/search-result-list.vue";
import SearchHistory from '../../../components/search-history/search-history.vue';
import SearchHotList from '../../../components/search-hot-list/search-hot-list.vue';
import search from '../../../store/modules/search';
const HOT_LIST = '0'
const SEARCH_HISTORY = '1'
const SEARCH_RESULT = '2'
export default {
  components: { mySearch, SearchResultList, SearchHistory, SearchHotList },
  data() {
    return {
      searchVal: '',
      defaultPlaceholderText: "请输入搜索内容",
      //显示搜索结果相关
      HOT_LIST,
      SEARCH_HISTORY,
      SEARCH_RESULT,
      showType:HOT_LIST,
      // searchHistoryData: [],
    };
  },
  mixins:[MescrollCompMixin],
  created() {
    this.loadDefaultText();
  },
  methods: {
    ...mapMutations('search',['onSaveSearchHistory']),
  
    onReserchConfirm(val) {
      // console.log('外层触发了confirm事件');
      // console.log(val);
      this.searchVal = val || this.defaultPlaceholderText
      // console.log('searchVal是'+this.searchVal);
      // this.onSaveSearchHistory()
      this.onSaveSearchHistory(this.searchVal)
      if(this.searchVal){
        // console.log(this.searchVal);
        // console.log(HOT_LIST,SEARCH_HISTORY, SEARCH_RESULT);
        this.showType = this.SEARCH_RESULT
      }
      // console.log(val);
      // this.searchVal=''
    },
    onReserchCancel(val) {
      this.showType = HOT_LIST
      // console.log(val);
    },
    onReserchClear(val) {
      this.showType = SEARCH_HISTORY
    },
    onReserchFocus(val) {
      this.showType = SEARCH_HISTORY
      // console.log(val);
    },
    onReserchBlur(val) {
      // console.log(val);
    },
    async loadDefaultText() {
      const { data: res } = await getDefaultTextAPI();
      this.defaultPlaceholderText = res.defaultText;
    },
    // onReceiveHotList(val){
    //   // console.log(val);
    //   this.onReserchConfirm(val)
    // }
   
  },
};
</script>

<style lang="scss" scoped>
.search-blog-container {
  .search-bar {
    height: 100%;
    background-color: #ffffff;
    padding: $uni-spacing-sm;
    position: sticky;
    top: 0px;
    z-index: 9;
  }
}
</style>
